<!-- ERC-知识库-其他信息页面 -->
<template>
  <div class="equip-wrap-common">
    <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item label="其他信息名称">
            <px-input
              v-model="queryParams.infoName"
              placeholder="请输入其他信息名称"
              maxlength="50"
              clearable
              @blur="queryParams.infoName = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <div class="equip-table-btn">
      <px-button v-has="'ERC_LEARN_OTHERINFO_ADD'" type="primary" @click="addBtn">新增其他信息</px-button>
    </div>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 311px)" border>
      <px-table-column label="序号" width="80" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">
          <px-button
            v-if="item.fileDesc && scope.row.fileDesc"
            v-has="'ERC_LEARN_OTHERINFO_PREVIEW'"
            link
            type="primary"
            @click="toFilePreview(scope.row)"
          >
            {{ scope.row.fileDesc }}
          </px-button>
          <span v-else-if="item.fileDesc && !scope.row.fileDesc">-</span>
          <span v-else>{{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}</span>
        </template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'ERC_LEARN_OTHERINFO_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button v-has="'ERC_LEARN_OTHERINFO_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <!-- 新增/修改/查看弹窗 -->
    <AddDialog :dialogVisible="dialogVisible" :dialogType="dialogType" :dialogRow="dialogRow" @closeDialog="closeDialog" @queryTable="queryTable" />
    <px-dialog
      v-model="previewDialogVisible"
      title="预览"
      width="1200px"
      @close="
        previewDialogVisible = false;
        previewFile = null;
      "
    >
      <iframe :src="previewFile" width="100%" height="600px" frameborder="0" />
      <div style="width: 100%; margin-top: 24px; text-align: right">
        <px-button
          @click="
            previewDialogVisible = false;
            previewFile = null;
          "
          >关闭</px-button
        >
      </div>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ERC_LEARN_EMERGENCY"
});
import { onMounted, reactive, toRefs } from "vue";
import axios from "axios";
import { getToken } from "@/utils/auth";
import { PxMessage, PxMessageBox } from "px-ui";
import AddDialog from "./components/AddDialog.vue";
import { deleteOtherInfo, queryOtherInfo } from "@/api/erc/learn";
const state = reactive<any>({
  queryParams: {
    infoName: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "infoName", label: "其他信息名称", minWidth: "200", showOverflowTooltip: true, fixed: "left" },
    { prop: "fileDesc", label: "其他信息文件", minWidth: "300", showOverflowTooltip: true, fileDesc: true },
    { prop: "updateByName", label: "更新人", minWidth: "140", showOverflowTooltip: true },
    { prop: "updateTime", label: "更新时间", minWidth: "140", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  dialogVisible: false,
  dialogType: "add",
  dialogRow: {},
  previewDialogVisible: false,
  previewFile: null
});
const { queryParams, tableColumns, tableData, total, dialogVisible, dialogType, dialogRow, previewDialogVisible, previewFile } = toRefs(state);

// 进入页面时触发
onMounted(async () => {
  queryTable();
});

// 查询其他信息列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryOtherInfo(params);
  tableData.value = data?.data;
  total.value = data?.total;
};
// 重置筛选条件和应急卡列表
const resetTable = async () => {
  queryParams.value = {
    infoName: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
};
// 新增
const addBtn = () => {
  dialogType.value = "add";
  dialogVisible.value = true;
};
// 预览文件
const toFilePreview = (row: any) => {
  const type = row.fileDesc.split(".")[1];
  const allowType = ["pdf"];
  if (!allowType.includes(type)) {
    PxMessage.error("暂不支持该格式文件的预览");
    return;
  }
  const params = {
    id: row.fileId
  };
  axios({
    method: "post",
    url: "/ifp/sharing/api/v1/file/download",
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + getToken().accessToken || "",
      facCode: localStorage.getItem("facCode") || ""
    },
    data: params,
    responseType: "arraybuffer"
  }).then(res => {
    previewFile.value = URL.createObjectURL(new Blob([res.data], { type: "application/pdf;chartset=utf-8" }));
    previewDialogVisible.value = true;
  });
};
// 编辑-显示弹窗
const handleEdit = (row: any) => {
  dialogType.value = "edit";
  dialogRow.value = row;
  dialogVisible.value = true;
};
// 删除
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前其他信息吗？删除后不可恢复，请谨慎操作`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      const params = {
        id: row.id
      };
      await deleteOtherInfo(params);
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: calc(100vh - 177px);
}
</style>
